<template>
  <div class="home" v-bind:style="{ gridTemplateRows: '20px 80px '+ (getInnerHeight-120) +'px 20px' }">
    <toolbar></toolbar>
    <top></top>
    <main>
      <div class="left">
        <left></left>
      </div>
      <div class="right">
        <right></right>
      </div>
    </main>
    <footer class="footer">www.tushow.top</footer>
  </div>
</template>

<script>
import Toolbar from '@/components/Toolbar.vue'
import Top from '@/components/Top.vue'
import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'

export default {
  name: 'Home',
  data () {
    return {
    }
  },
  mounted () {
    console.log('this.getInnerHeight' + this.getInnerHeight)
  },
  computed: {
    getInnerHeight () {
      return this.$store.state.innerHeight
    },
    getInnerWidth () {
      return this.$store.state.innerWidth
    }
  },
  methods: {
    active (i) {
      this.activeLayoutIndex = i
      const index = this.layout.indexOf(this.layout.filter(function (currentValue) {
        return currentValue.i === i
      })[0])
      this.activeArrayIndex = index
    },
    test () {
      console.log('test')
    },
    createSlide (i) {
      console.log(i)
      console.log(this.layout.filter(function (currentValue) {
        return currentValue.i === i
      }))
      this.layout.push({ x: 0, y: this.layout[this.activeArrayIndex].y + 1, w: 1, h: 5, i: this.slideNum })
      this.slideNum++
      this.active(this.slideNum - 1)
    },
    deleteSlide (i) {
      console.log(i)
      this.layout.splice(this.activeArrayIndex, 1)
    },
    onContextmenu (i, event) {
      this.active(i)
      this.$contextmenu({
        items: [
          {
            label: '新建幻灯片',
            icon: 'el-icon-postcard',
            divided: true,
            onClick: () => {
              console.log('新建')
              this.createSlide(i)
            }
          },
          {
            label: '复制幻灯片',
            icon: 'el-icon-document-copy',
            divided: true,
            onClick: () => {
              console.log('复制')
              console.log(i)
              this.test()
            }
          },
          {
            label: '删除幻灯片',
            icon: 'el-icon-document-copy',
            divided: true,
            onClick: () => {
              console.log('删除')
              this.deleteSlide(i)
            }
          }
        ],
        event,
        // x: event.clientX,
        // y: event.clientY,
        customClass: 'class-a',
        zIndex: 300,
        minWidth: 100
      })
      return false
    },
    getHeight () {
      this.innerHeight = window.innerHeight
      this.innerWidth = window.innerWidth
      console.log('innerHeight' + this.innerHeight)
    }
  },
  watch: {
  },
  components: {
    Toolbar,
    Top,
    Left,
    Right
  }
}
</script>

<style scoped>
    .home {
      display:grid;
      height:100%;
    }
    main {
        box-sizing: border-box;
        background-color: white;
        border-top: solid 1px grey;
        display: grid;
        grid-template-columns: 250px 1fr;
      }
    .left{
        box-sizing: border-box;
        border-right: solid 1px rgba(198, 194, 194, 0.603);
        padding: 10px;
        background-color: rgb(230,230,230);
        width:100%;
        height:100%;
        overflow-y: scroll
    }
    .right{
        background-color: rgba(233, 230, 230, 0.945);
        padding:5px;
        width:100%;
        height:100%;
        display:flex;
        justify-content: center;
        align-items: center
    }
    .footer {
      box-sizing: border-box;
      box-shadow: 1px 1px 2px #393838fb;
      background-color: rgba(233, 230, 230, 0.945);
    }
</style>
